<template>
    <view>
        <loading-view v-if="showLoading"></loading-view>
        <u-notice-bar :show="showTips" mode="horizontal" :list="list" :font-size="26" :close-icon="true" :speed="100"
            @close="showTips = false"></u-notice-bar>
        <view class="user-spread">
            <view class="header">
                <view class="user-info flex m-l-30">
                    <view class="user-avatar">
                        <u-image width="110rpx" height="110rpx" border-radius="60" :src="userInfo.user.avatar" />
                    </view>
                    <view class="user-message m-l-20 white">
                        <view class="m-b-10 flex">
                            <view class="xxl bold  m-r-20">{{ userInfo.user.nickname }}</view>
                            <view class="avatar-tag white xxs text-center m-b-10" v-if="distributionInfo.level_name">
                                {{ distributionInfo.level_name }}</view>
                        </view>

                        <view class="xs flex">
                            战略枢纽商：{{ userInfo.leader.nickname ? userInfo.leader.nickname : '无' }}
                            <view v-if="!userInfo.leader.nickname"
                                class="br60 white write-btn flex row-center m-l-30 xxs" @tap="showInvitePop">填写
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="main">
                <!-- 填表格 -->
                <view v-if="vipState == 0" class="user-apply-box">
                    <view class="user-apply-vip flex-col col-center">
                        <view class="user-apply-header flex-col col-center">
                            <view class="title xxl normal">申请成为分销会员</view>
                        </view>
                        <view class="vip-form">
                            <view class="form-item">
                                <u-field v-model="realName" :label-width="150" label="真实姓名：" :border-bottom="false"
                                    placeholder="请输入您的真实姓名">
                                </u-field>
                            </view>

                            <view class="form-item">
                                <u-field v-model="mobile" :label-width="150" label="手机号码：" :border-bottom="false"
                                    placeholder="请输入您的手机号码">
                                </u-field>
                            </view>
                            <view class="form-item" @tap="showRegion = true">
                                <u-field v-model="region" disabled right-icon="arrow-right" :label-width="150"
                                    label="现住省份：" :border-bottom="false" placeholder="请选择省、市、区">
                                </u-field>
                            </view>
                            <view class="form-item">
                                <u-field v-model="reason" :label-width="150" type="textarea" label="申请原因："
                                    placeholder="（必填）" :field-style="{ height: '250rpx' }" />
                            </view>
                        </view>
                    </view>
                    <button class="apply-btn bg-primary white md m-t-20 flex row-center br60" @tap="formSubmit">
                        立即申请
                    </button>
                    <view class="m-t-20 xxs lighter flex row-center">提交成功后，我们将会在1-2个工作日内给您回复</view>
                </view>

                <!-- 申请状态 -->
                <view v-if="vipState == 1" class="user-result-box">
                    <view class="user-result flex-col col-center">
                        <view class="user-result-header flex-col col-center">
                            <view class="title xxl normal">申请成为分销会员</view>
                        </view>
                        <view class="user-result-content flex-col col-center">
                            <image class="apply-result-img"
                                :src="applyObject.status == 2 ? '/static/images/icon_fail.png' : '/static/images/icon_success.png'" />
                            <view class="m-t-10 nr" style="line-height: 40rpx">{{ applyObject.status_str }}</view>
                            <view class="apply-fail-reason sm"
                                :style="applyObject == 2 ? 'visibility: none' : 'visibility: hidden'">
                                {{ applyObject.reason }}
                            </view>
                        </view>
                        <view class="user-result-info">
                            <view class="info-item flex nr">
                                <view class="label">真实姓名：</view>
                                <view class="info-text ml20">{{ applyObject.real_name }}</view>
                            </view>
                            <view class="info-item flex nr">
                                <view class="label">手机号码：</view>
                                <view class="info-text ml20">{{ applyObject.mobile }}</view>
                            </view>
                            <view class="info-item flex nr">
                                <view class="label">现住省份：</view>
                                <view class="info-text ml20">{{ applyObject.province }} {{ applyObject.city }}
                                    {{ applyObject.district }}
                                </view>
                            </view>
                            <view class="info-item flex nr">
                                <view class="label">申请原因：</view>
                                <view class="info-text ml20">{{ applyObject.reason ? applyObject.reason : '-' }}</view>
                            </view>
                        </view>
                    </view>
                    <view :class="'white m-t-20 br60 apply-btn flex row-center md bg-primary'" @tap="reApply">重新申请
                    </view>
                    <view class="m-t-20 xxs lighter flex row-center">提交成功后，我们将会在1-2个工作日内给您回复</view>
                </view>

                <!-- 已申请 -->
                <view v-if="vipState == 2" class="user-vip m-t-20">
                    <view class="user-assets-box">
                        <!-- <view class="user-assets-header flex row-between">
                            <view class="flex " style="line-height: 80rpx;color: #888;">
                                可收取（元）                      
                            </view>
                            <navigator class="flex" style="line-height: 80rpx;color: #888;"
                                url="/bundle/pages/user_withdraw_code/user_withdraw_code">收取记录<u-icon class="m-l-10" name="arrow-right" size="28rpx" color="#888"/></navigator>
                            
                        </view>
                        <view class="user-assets-money flex row-between">
                            {{distributionInfo.earnings || "0.00"}}
							<navigator hover-class="none" class="primary-btn white flex row-center"
								url="/bundle/pages/user_withdraw/user_withdraw">立即收取</navigator>
                        </view>                     -->
                        <view class="user-assets-content flex  flex-wrap">
                            <view class="user-item flex-col col-center">
                                <view class="nr user-assets-name flex">
                                    总收益
                                </view>
                                <view class="assets">
                                    {{ distributionInfo.today_earnings || "0.00" }}
                                </view>
                            </view>
                            <view class="user-item flex-col col-center">
                                <view class="nr user-assets-name flex">
                                    待结算
                                </view>
                                <view class="assets">
                                    {{ distributionInfo.month_earnings || "0.00" }}
                                </view>
                            </view>
                        </view>
                        <view class="user-assets-content flex  flex-wrap">
                            <view class="user-item flex-col col-center">
                                <view class="nr user-assets-name flex">
                                    销售业绩
                                </view>
                                <view class="assets">
                                    {{ distributionInfo.last_earnings || "0.00" }}
                                </view>
                            </view>
                            <view class="user-item flex-col col-center">
                                <view class="nr user-assets-name flex">
                                    市场业绩
                                </view>
                                <view class="assets">
                                    {{ distributionInfo.team_amount || "0.00" }}
                                </view>
                            </view>
                        </view>
                        <!-- <view class="user-assets-content flex-col col-center">                          
                            <navigator hover-class="none" class="primary-btn white flex row-center"
                            	url="/bundle/pages/user_withdraw/user_withdraw">立即收取</navigator>
                            
                        </view> -->
                    </view>
                    <view class="m-t-20 fans-msg-box flex">
                        <router-link class="item" to="/bundle/pages/user_fans/user_fans">
                            <view class="img-wrap m-20">
                                <image src="../../static/team1.png" mode=""></image>
                            </view>
                            <view class="my-fans">
                                <view class="all-money-tit">
                                    我的好友
                                </view>
                                <view class="all-money-tit" style="color: #909399;">{{ distributionInfo.fans }}人</view>
                            </view>
                        </router-link>
                        <view class="item m-l-20">
                            <view class="img-wrap m-20">
                                <image src="../../static/team2.png" mode=""></image>
                            </view>
                            <view class="my-fans">
                                <view class="all-money-tit">
                                    邀请码
                                </view>
                                <view class="all-money-tit" style="color: #909399;"> {{ userInfo.user.distribution_code }}
                                </view>

                            </view>
                            <view class="invite-copy-btn m-l-20 xxs" @click="onCopy">复制</view>
                        </view>

                    </view>

                    <view class="usual-tools-box bg-white m-t-20">
                        <view class="usual-tools-header flex lg bold">
                            常用工具
                        </view>
                        <view class="usual-content flex">

                            <router-link class="usual-item" to="/bundle/pages/user_spread_order/user_spread_order">
                                <view class="flex-col col-center">
                                    <image src="/bundle/static/icon_fenxiao.png" class="usual-item-img"></image>
                                    <view class="nr normal m-t-20" style="line-height: 40rpx">销售订单</view>
                                </view>
                            </router-link>
                            <router-link class="usual-item" to="/bundle/pages/commission_details/commission_details">
                                <view class="flex-col col-center">
                                    <image src="/bundle/static/icon_yongjin.png" class="usual-item-img"></image>
                                    <view class="nr normal m-t-20" style="line-height: 40rpx">收益明细</view>
                                </view>
                            </router-link>
                            <router-link class="usual-item" to="/bundle/pages/monthly_bill/monthly_bill">
                                <view class="flex-col col-center">
                                    <image src="/bundle/static/icon_zhangdan.png" class="usual-item-img"></image>
                                    <view class="nr normal m-t-20" style="line-height: 40rpx">月度账单</view>
                                </view>
                            </router-link>
                            <view class="usual-item" @click="handleClickTax">
                                <view class="flex-col col-center">
                                    <image src="/bundle/static/order_2.png" class="usual-item-img"></image>
                                    <view class="nr normal m-t-20" style="line-height: 40rpx">税筹登记</view>
                                </view>
                            </view>
                        </view>
                        <view class="usual-content flex">
                            <view class="usual-item" @click="handleClickTurn">
                                <view class="flex-col col-center">
                                    <image src="/bundle/static/turn.png" class="usual-item-img"></image>
                                    <view class="nr normal m-t-20" style="line-height: 40rpx">佣余互转</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <u-popup v-model="showPop" mode="center" closeable border-radius="30">
                <view class="inviteform-contain flex-col col-center">
                    <view class="title xl">填写邀请人</view>
                    <view class="input-row flex">
                        <view style="width: 140rpx;">邀请码：</view>
                        <u-input :clearable="false" v-model="invite_code" placeholder="请输入邀请码"></u-input>
                    </view>
                    <view class="btn bg-primary white flex row-center" @tap="bindSuperiorFun">确定</view>
                </view>
            </u-popup>
            <u-select v-model="showRegion" mode="mutil-column-auto" @confirm="regionChange" :list="regionLists">
            </u-select>
        </view>
    </view>

</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import {
    bindSuperior,
    applyDistribute,
    applyDetail,
    getSuperiorInfo,
    getDistribution,
    veryfiyDistribute,
    setAppkey,
    setUserStatus,
} from "@/api/user";
import area from '@/utils/area'
import {
    copy
} from '@/utils/tools'
export default {
    data() {
        return {
            list: [],
            showTips: true,
            showLoading: true,
            // 弹窗展示
            showPop: false,
            invite_code: '',
            mobile: '',
            realName: '',
            reason: '',
            region: '',
            // 省id
            provinceId: -1,
            // 市id
            cityId: -1,
            // 区ID
            districtId: -1,
            // 推销状态 0 ==> 未申请 1 ==> 申请进度 2 ==> 已申请
            // vipState: 0,
            vipState: 2,
            userInfo: {
                user: {},
                leader: {},
                earnings: 0, //可提现余额
            },
            // 审核信息对象
            applyObject: {},
            // 邀请人状态
            inviteStatus: false,
            showRegion: false,
            regionLists: area,
            distributionInfo: {},
            secretKey: '',
            userInfo1: null,
            earnings: 0,
            tempUrl: '',
        };
    },
    onLoad(options) {
        // 获取上级及个人信息
        this.getSuperiorInfoFun()
        // 判断是否是分销会员
        this.veryfiyDistributeFun()
        //获取税筹秘钥
        this.getAppkey();
        //获取用户信息
        this.getUser1();
    },
    methods: {
        ...mapActions(['getCartNum', 'getUser']),
        getUser1() {
            this.getUser().then(res => {
                console.log('res');
                console.log(res);
                this.userInfo1 = res;
            })
        },
        getAppkey() {
            setAppkey().then(res => {
                this.secretKey = res.data.appkey;
            })
        },
        onMessage(e) {
            console.log('message');
            console.log(e);
        },
        getUserStatus() {
            console.log(this.userInfo);
            let obj = {
                mobile: this.userInfo1.mobile,
                uid: this.userInfo1.sn,
            }
            setUserStatus(obj).then(res => {
                console.log(res);
                let data = res.data;
                if (data.result == 0) {
                    this.$toast({
                        title: data.message,
                        icon: 'none',
                        duration: 2000
                    })
                    let baseHost1 = 'https://jiaolongnet.cn/';  //测试环境
                    let baseHost2 = 'https://scontract.jolongnet.cn/';  //正式环境
                    let url = baseHost2 + '?sjons=' + this.secretKey + '&yztel=' + this.userInfo1.mobile + '&uid=' + this.userInfo1.sn;
                    console.log('url');
                    // #ifdef APP-PLUS
                    console.log('app123');
                    console.log(url);
                    uni.navigateTo({
                        url: "/pages/webview/webview2?url=" +  encodeURIComponent(encodeURIComponent(url)),
                    });
                    // #endif
                    // #ifdef H5
                    setTimeout(() => {
                        location.href = url;
                    }, 1000)
                    // #endif
                } else {
                    uni.navigateTo({
                        url: '/bundle/pages/tax_record/tax_record?earnings=2' + '&yztel=' + this.userInfo1.mobile + '&uid=' + this.userInfo1.sn,
                    })
                }
            })
        },
        handleClickTax() {
            //获取签约状态
            this.getUserStatus();   

            //测试
            // uni.navigateTo({
            //     url: '/bundle/pages/tax_record/tax_record?earnings=2' + '&yztel=' + this.userInfo1.mobile + '&uid=' + this.userInfo1.id,
            // })
        },
        handleClickTurn() {
            uni.navigateTo({
                url: '/bundle/pages/tax_record/tax_record?earnings=1' + '&yztel=' + this.userInfo1.mobile + '&uid=' + this.userInfo1.id,
            })
        },
        // 分销会员信息
        async getDistributionFun() {
            const {
                data,
                code
            } = await getDistribution()
            if (code == 1) {
                console.log("分销会员信息");
                console.log(data);
                this.showLoading = false;
                this.distributionInfo = data;
                this.earnings = data.earnings;
                console.log('this.earnings');
                console.log(data.earnings);
            }
        },

        veryfiyDistributeFun() {
            veryfiyDistribute().then(res => {
                this.getDistributionFun();
                this.applyDetailFun()
                if (res.code == 10001) {
                    // 分销会员
                    this.vipState = 2
                    // this.getDistributionFun();
                } else if (res.code == 20001) {
                    // 非分销会员
                    this.vipState = 2;
                    // this.applyDetailFun()
                } else if (res.code == 0) {
                    // 返回上一页
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 500)
                }
            })
        },

        // 最新分销会员申请详情
        async applyDetailFun() {
            const {
                data,
                code
            } = await applyDetail()
            if (code == 1) {
                this.showLoading = false
                switch (data.status) {
                    case 0:
                    // 待审核
                    case 2:
                        // 审核不通过
                        this.vipState = 2;
                        this.applyObject = data
                        break;
                }
            }
        },

        reApply() {
            this.vipState = 2
        },

        regionChange(region) {
            this.region = region[0].label + " " + region[1].label + " " + region[2].label
            this.provinceId = region[0].value;
            this.cityId = region[1].value;
            this.districtId = region[2].value
        },

        async formSubmit() {
            let {
                provinceId,
                cityId,
                districtId,
                reason,
                mobile,
                realName,
                region
            } = this;

            if (!realName) {
                this.$toast({
                    title: "请填写真实姓名"
                });
                return;
            }

            if (!region.length) {
                this.$toast({
                    title: "请选择省市区"
                });
                return;
            }

            let params = {
                real_name: realName,
                province: provinceId,
                city: cityId,
                district: districtId,
                reason: reason,
                mobile
            };
            const {
                data,
                code,
                msg
            } = await applyDistribute(params)
            if (code == 1) {
                this.$toast({
                    title: msg
                });
                this.applyDetailFun();
            }
        },


        // 填写邀请码
        bindSuperiorFun() {
            bindSuperior({
                code: this.invite_code
            }).then(res => {
                this.$toast({
                    title: res.msg
                })
                if (res.code == 1) {
                    this.showPop = false
                    this.getSuperiorInfoFun();
                }
            });
        },

        showInvitePop() {
            this.showPop = true;
        },

        // 获取邀请人信息
        async getSuperiorInfoFun() {
            const {
                data,
                code
            } = await getSuperiorInfo()
            if (code == 1) {
                this.userInfo = data
                console.log('this.userInfo');
                console.log(this.userInfo);
            }
        },
        onCopy() {
            copy(this.userInfo.user.distribution_code)
        },

    }
};
</script>
<style lang="scss">
.user-spread {


    .header {
        background-image: url(../../static/spread_top_bg.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        padding: 40rpx 20rpx;

        .user-info {
            .user-avatar {
                position: relative;


            }

            .avatar-tag {
                display: inline-block;
                background-color: #F79C0C;
                border: 1rpx solid #FFFFFF;
                border-radius: 100rpx;
                line-height: 32rpx;
                padding: 0 10rpx;
            }

            .user-message {
                .write-btn {
                    height: 42rpx;
                    width: 100rpx;
                    background-color: #FF838D;
                }
            }
        }
    }

    .main {
        padding: 0 20rpx;

        .user-vip {
            .user-assets-box {
                background-color: #fff;
                border-radius: 20rpx;
                padding: 10rpx 20rpx 22rpx;
                // background: linear-gradient(90deg, #FBEFDB 0%, #FED09E 100%);

                .user-assets-header {
                    // border-bottom: 1rpx dashed #8F430E;
                    padding-bottom: 4rpx;

                    .primary-btn {
                        height: 54rpx;
                        border-radius: 120rpx;
                        width: 144rpx;
                        background: linear-gradient(180deg, #ff9900 0%, #f99100 100%);
                    }
                }

                .user-assets-money {
                    color: #e80200;
                    font-size: 38rpx;
                    font-weight: 700;
                    line-height: 1;
                }

                .user-assets-content {
                    margin-top: 30rpx;

                    .user-item {
                        flex: 1;
                        position: relative;

                        .user-assets-name {
                            text-align: center;
                            align-self: flex;
                            color: #888;
                        }

                        .assets {
                            margin-top: 14rpx;
                            text-align: center;
                            // align-self: flex;
                            color: #303133;
                            font-size: 38rpx;
                        }
                    }

                    .primary-btn {
                        height: 92rpx;
                        line-height: 92rpx;
                        border-radius: 92rpx;
                        width: 60%;
                        background: linear-gradient(90deg, #ffe2ac, #fdc174);
                        text-align: center;
                        font-weight: 800;
                        color: #985400;
                        font-size: 30rpx;
                    }

                }
            }

            .fans-msg-box {
                border-radius: 10rpx;
                width: 100%;

                .item {
                    display: flex;
                    align-items: center;
                    // margin: 0 12px 10px 12px;
                    border-radius: 8px;
                    background-color: #fff;
                    padding: 15px 0;
                    flex: 1;

                    .img-wrap {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 35px;
                        height: 35px;

                        image {
                            width: 35px;
                            height: 35px;
                        }

                        .my-fans {
                            flex: 1;
                            margin-left: 12px;
                            display: flex;
                            flex-direction: column;

                            .all-money-tit {
                                line-height: 1;
                                color: #303133;
                                font-size: 14px;
                                flex: 1;
                            }
                        }

                    }

                    .invite-copy-btn {
                        line-height: 30rpx;
                        padding: 10rpx;
                        background: linear-gradient(90deg, #FEE4B4 0%, #FBCB96 100%);
                        color: #8F430E;
                        border-radius: 4rpx;
                    }

                }

                .line {
                    width: 3rpx;
                    height: 60rpx;
                    background-color: #E5E5E5;
                }

                .invite-fans {
                    height: 120rpx;
                }
            }

            .my-invite-box {
                padding: 26rpx 0 57rpx;
                border-radius: 10rpx;



                .my-promote-banner {
                    margin-top: 30rpx;
                    height: 148rpx;
                    width: 542rpx;
                    border-radius: 10rpx;
                }
            }

            .usual-tools-box {
                border-radius: 10rpx;
                padding: 0 25rpx;

                .usual-tools-header {
                    height: 100rpx;
                    line-height: 44rpx;
                    border-bottom: $-solid-border;
                }

                .usual-content {
                    padding: 40rpx 0;

                    .usual-item {
                        width: 25%;

                        .usual-item-img {
                            width: 56rpx;
                            height: 56rpx;
                            flex: none;
                        }

                    }
                }
            }
        }

        .user-apply-box {
            .user-apply-vip {
                background-color: white;
                padding: 40rpx 0 0rpx;
                border-radius: 20rpx;

                .title {
                    line-height: 30rpx;
                    font-weight: bold;
                }

                .explain {
                    margin-top: 20rpx;

                    image {
                        width: 24rpx;
                        height: 24rpx;
                        flex: none;
                    }

                    span {
                        font-size: 20rpx;
                        line-height: 30rpx;
                    }
                }

                .vip-form {
                    width: 100%;
                    margin-top: 60rpx;

                    .form-item {
                        border: $-solid-border;
                        margin: 0 30rpx 30rpx;
                    }
                }
            }

            .apply-btn {
                line-height: 30rpx;
                height: 82rpx;
            }
        }

        .user-result-box {
            .user-result {
                background-color: white;
                padding: 36rpx 14rpx 50rpx;
                border-radius: 20rpx;

                .user-result-header {
                    .title {
                        line-height: 30rpx;
                        font-weight: bold;
                    }

                }

                .user-result-content {
                    padding: 60rpx 0 22rpx;
                    width: 100%;
                    border-bottom: $-solid-border;

                    .apply-result-img {
                        width: 100rpx;
                        height: 100rpx;
                    }
                }

                .user-result-info {
                    margin-top: 42rpx;
                    width: 100%;

                    .info-item {
                        margin-left: 60rpx;
                        margin-bottom: 28rpx;
                        line-height: 30rpx;

                        .label {
                            width: 140rpx;
                        }
                    }
                }
            }

            .apply-btn {
                line-height: 30rpx;
                height: 82rpx;
            }

            .bg-gray {
                background-color: #CCCCCC;
            }
        }
    }
}


.main .user-apply-box .apply-btn {
    line-height: 30rpx;
    height: 82rpx;
}

.main .user-result-box .user-result-content .apply-fail-reason {
    color: $-color-primary;
    line-height: 36rpx;
    margin-top: 10rpx;
}

/* 弹窗 */
.inviteform-contain {
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-bottom: 30rpx;
    width: 580rpx;
    border-radius: 6rpx;
    background-color: $-color-white;
}

.inviteform-contain .title {
    padding: 26rpx 0rpx;
}

.inviteform-contain .modify-row {
    padding: 32rpx 0px;
    width: 100%;
    border-bottom: 1rpx solid #E5E5E5;
}

.inviteform-contain .btn {
    height: 80rpx;
    padding: 0 180rpx;
    border-radius: 10rpx;
    margin-top: 60rpx;
}
</style>
